<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="设备编号" prop="deviceId">
        <el-input
          v-model="queryParams.deviceId"
          placeholder="设备编号"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="设备名称"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="厂商" prop="manufacturer">
        <el-input
          v-model="queryParams.manufacturer"
          placeholder="厂商"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input
          v-model="queryParams.model"
          placeholder="型号"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="在线状态" prop="onLine">
        <el-select
          v-model="queryParams.onLine"
          placeholder="在线状态"
          clearable
          style="width: 140px"
        >
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="传输协议" prop="transport">
        <el-select
          v-model="queryParams.transport"
          placeholder="传输协议"
          clearable
          style="width: 120px"
        >
          <el-option label="UDP" value="UDP"></el-option>
          <el-option label="TCP" value="TCP"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备IP" prop="ip">
        <el-input
          v-model="queryParams.ip"
          placeholder="设备IP"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流模式" prop="streamMode">
        <el-select
          v-model="queryParams.streamMode"
          placeholder="流模式"
          clearable
          style="width: 120px"
        >
          <el-option label="主动" value="主动"></el-option>
          <el-option label="被动" value="被动"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:wvpDevice:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:wvpDevice:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:wvpDevice:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:wvpDevice:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 批量操作区域 -->
    <div v-if="selectedDevices.length > 0" class="batch-actions">
      <el-alert 
        :title="`已选择 ${selectedDevices.length} 个设备`" 
        type="info" 
        :closable="false"
        style="margin-bottom: 15px;"
      >
        <template slot="default">
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span>已选择 {{ selectedDevices.length }} 个设备</span>
            <div>
              <el-button 
                size="mini" 
                type="danger" 
                @click="handleBatchDelete"
                v-hasPermi="['system:wvpDevice:remove']"
              >批量删除</el-button>
              <el-button size="mini" @click="clearSelection">取消选择</el-button>
            </div>
          </div>
        </template>
      </el-alert>
    </div>

    <!-- 卡片式布局 -->
    <div v-loading="loading" class="device-cards-container">
      <div class="cards-grid">
        <el-card 
          v-for="device in wvpDeviceList" 
          :key="device.id"
          class="device-card"
          :class="{ 'selected': isDeviceSelected(device) }"
          shadow="hover"
          @click.native="toggleDeviceSelection(device)"
        >
          <!-- 卡片头部 -->
          <div class="card-header" slot="header">
            <div class="device-title">
              <el-checkbox 
                :value="isDeviceSelected(device)"
                @change="toggleDeviceSelection(device)"
                @click.native.stop
              ></el-checkbox>
              <div class="title-content">
                <div class="device-name">{{ device.name || device.deviceId }}</div>
                <div class="device-id">设备编号：{{ device.deviceId }}</div>
              </div>
              <el-tag 
                :type="device.onLine === '1' ? 'success' : 'danger'" 
                size="small"
                class="status-tag"
              >
                {{ device.onLine === '1' ? '在线' : '离线' }}
              </el-tag>
            </div>
          </div>

          <!-- 卡片内容 -->
          <div class="card-content">
            <!-- 基础信息 -->
            <div class="info-section">
              <h4 class="section-title">基础信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">厂商:</span>
                  <span class="value">{{ device.manufacturer || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">型号:</span>
                  <span class="value">{{ device.model || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">固件版本:</span>
                  <span class="value">{{ device.firmware || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">字符集:</span>
                  <span class="value">{{ device.charset || '-' }}</span>
                </div>
              </div>
            </div>

            <!-- 网络配置 -->
            <div class="info-section">
              <h4 class="section-title">网络配置</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">设备IP:</span>
                  <span class="value">{{ device.ip || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">端口:</span>
                  <span class="value">{{ device.port || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">传输协议:</span>
                  <span class="value">{{ device.transport || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">流模式:</span>
                  <span class="value">{{ device.streamMode || '-' }}</span>
                </div>
              </div>
            </div>

            <!-- 状态配置 -->
            <div class="info-section">
              <h4 class="section-title">状态配置</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">SSRC校验:</span>
                  <el-tag :type="device.ssrcCheck === '1' ? 'success' : 'info'" size="mini">
                    {{ device.ssrcCheck === '1' ? '是' : '否' }}
                  </el-tag>
                </div>
                <div class="info-item">
                  <span class="label">消息通道:</span>
                  <el-tag :type="device.asMessageChannel === '1' ? 'success' : 'info'" size="mini">
                    {{ device.asMessageChannel === '1' ? '是' : '否' }}
                  </el-tag>
                </div>
                <div class="info-item">
                  <span class="label">有效期:</span>
                  <span class="value">{{ device.expires ? device.expires + 's' : '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">心跳间隔:</span>
                  <span class="value">{{ device.heartBeatInterval ? device.heartBeatInterval + 's' : '-' }}</span>
                </div>
              </div>
            </div>

            <!-- 时间信息 -->
            <div class="info-section">
              <h4 class="section-title">时间信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">注册时间:</span>
                  <span class="value">{{ device.registerTime || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">心跳时间:</span>
                  <span class="value">{{ device.keepaliveTime || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">媒体服务ID:</span>
                  <span class="value">{{ device.mediaServerId || '-' }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 卡片操作按钮 -->
          <div class="card-actions">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click.stop="handleUpdate(device)"
              v-hasPermi="['system:wvpDevice:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click.stop="handleDelete(device)"
              v-hasPermi="['system:wvpDevice:remove']"
            >删除</el-button>
          </div>
        </el-card>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && wvpDeviceList.length === 0" class="empty-state">
        <el-empty description="暂无设备数据">
          <el-button type="primary" @click="handleAdd">添加第一个设备</el-button>
        </el-empty>
      </div>
    </div>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 基础信息 -->
        <el-card shadow="never" style="margin-bottom: 15px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">基础信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="设备编号" prop="deviceId">
                <el-input v-model="form.deviceId" placeholder="设备编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="form.name" placeholder="设备名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="自定义名称" prop="customName">
                <el-input v-model="form.customName" placeholder="自定义名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="厂商" prop="manufacturer">
                <el-input v-model="form.manufacturer" placeholder="厂商" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="型号" prop="model">
                <el-input v-model="form.model" placeholder="型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="固件版本" prop="firmware">
                <el-input v-model="form.firmware" placeholder="固件版本" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 网络配置 -->
        <el-card shadow="never" style="margin-bottom: 15px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">网络配置</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="设备IP" prop="ip">
                <el-input v-model="form.ip" placeholder="设备IP" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备端口" prop="port">
                <el-input-number v-model="form.port" placeholder="设备端口" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备密码" prop="password">
                <el-input v-model="form.password" type="password" placeholder="设备密码" show-password />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="传输协议" prop="transport">
                <el-select v-model="form.transport" placeholder="选择传输协议">
                  <el-option label="UDP" value="UDP"></el-option>
                  <el-option label="TCP" value="TCP"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="流模式" prop="streamMode">
                <el-select v-model="form.streamMode" placeholder="选择流模式">
                  <el-option label="主动" value="主动"></el-option>
                  <el-option label="被动" value="被动"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备域名" prop="hostAddress">
                <el-input v-model="form.hostAddress" placeholder="设备域名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SDP IP" prop="sdpIp">
                <el-input v-model="form.sdpIp" placeholder="SDP IP地址" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="本地IP" prop="localIp">
                <el-input v-model="form.localIp" placeholder="本地IP地址" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 设备状态 -->
        <el-card shadow="never" style="margin-bottom: 15px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">设备状态</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="在线状态" prop="onLine">
                <el-switch 
                  v-model="form.onLine" 
                  active-value="1" 
                  inactive-value="0"
                  active-text="在线" 
                  inactive-text="离线">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="作为消息通道" prop="asMessageChannel">
                <el-switch 
                  v-model="form.asMessageChannel" 
                  active-value="1" 
                  inactive-value="0"
                  active-text="是" 
                  inactive-text="否">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SSRC校验" prop="ssrcCheck">
                <el-switch 
                  v-model="form.ssrcCheck" 
                  active-value="1" 
                  inactive-value="0"
                  active-text="校验" 
                  inactive-text="不校验">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="ACK广播推送" prop="broadcastPushAfterAck">
                <el-switch 
                  v-model="form.broadcastPushAfterAck" 
                  active-value="1" 
                  inactive-value="0"
                  active-text="是" 
                  inactive-text="否">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="字符集" prop="charset">
                <el-select v-model="form.charset" placeholder="选择字符集">
                  <el-option label="UTF-8" value="UTF-8"></el-option>
                  <el-option label="GB2312" value="GB2312"></el-option>
                  <el-option label="GBK" value="GBK"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="坐标系统" prop="geoCoordSys">
                <el-select v-model="form.geoCoordSys" placeholder="选择坐标系统">
                  <el-option label="WGS84" value="WGS84"></el-option>
                  <el-option label="GCJ02" value="GCJ02"></el-option>
                  <el-option label="BD09" value="BD09"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 配置参数 -->
        <el-card shadow="never" style="margin-bottom: 15px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">配置参数</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="注册有效期(秒)" prop="expires">
                <el-input-number v-model="form.expires" placeholder="注册有效期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="心跳间隔(秒)" prop="heartBeatInterval">
                <el-input-number v-model="form.heartBeatInterval" placeholder="心跳间隔" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="心跳计数器" prop="heartBeatCount">
                <el-input-number v-model="form.heartBeatCount" placeholder="心跳计数器" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目录订阅周期(秒)" prop="subscribeCycleForCatalog">
                <el-input-number v-model="form.subscribeCycleForCatalog" placeholder="目录订阅周期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="位置订阅周期(秒)" prop="subscribeCycleForMobilePosition">
                <el-input-number v-model="form.subscribeCycleForMobilePosition" placeholder="位置订阅周期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="位置提交间隔(秒)" prop="mobilePositionSubmissionInterval">
                <el-input-number v-model="form.mobilePositionSubmissionInterval" placeholder="位置提交间隔" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报警订阅周期(秒)" prop="subscribeCycleForAlarm">
                <el-input-number v-model="form.subscribeCycleForAlarm" placeholder="报警订阅周期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="媒体服务ID" prop="mediaServerId">
                <el-input v-model="form.mediaServerId" placeholder="流媒体服务ID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务器ID" prop="serverId">
                <el-input v-model="form.serverId" placeholder="所属服务器ID" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listWvpDevice, getWvpDevice, delWvpDevice, addWvpDevice, updateWvpDevice } from "@/api/system/wvpDevice";
import { wvpLogin } from "@/utils/wvpRequest";

export default {
  name: "WvpDevice",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 国标28181设备表格数据
      wvpDeviceList: [],
      // WVP相关状态
      wvpAccessToken: null,
      isWvpLoggedIn: false,
      // 卡片选择状态
      selectedDevices: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        name: null,
        manufacturer: null,
        model: null,
        firmware: null,
        transport: null,
        streamMode: null,
        onLine: null,
        registerTime: null,
        keepaliveTime: null,
        ip: null,
        port: null,
        expires: null,
        subscribeCycleForCatalog: null,
        subscribeCycleForMobilePosition: null,
        mobilePositionSubmissionInterval: null,
        subscribeCycleForAlarm: null,
        hostAddress: null,
        charset: null,
        ssrcCheck: null,
        geoCoordSys: null,
        mediaServerId: null,
        customName: null,
        sdpIp: null,
        localIp: null,
        password: null,
        asMessageChannel: null,
        heartBeatInterval: null,
        heartBeatCount: null,
        positionCapability: null,
        broadcastPushAfterAck: null,
        serverId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deviceId: [
          { required: true, message: "设备国标编号不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.loginToWvp();
  },
  methods: {
    /** 自动登录WVP平台 */
    loginToWvp() {
      if (this.isWvpLoggedIn) return;
      console.log("WVP设备页面：尝试自动登录WVP平台...");
      wvpLogin('admin', '6f1db4f72b187835d9ac5068223ad822')
        .then(res => {
          if (res.data && res.data.accessToken) {
            this.wvpAccessToken = res.data.accessToken;
            this.isWvpLoggedIn = true;
            console.log("WVP设备页面：WVP-GB28181-Pro 自动登录成功");
            this.$message.success("WVP平台连接成功");
          } else {
            throw new Error(res.msg || "登录失败，未获取到访问令牌");
          }
        })
        .catch(err => {
          console.error("WVP设备页面：WVP自动登录错误:", err);
          this.$message.error("WVP平台连接失败: " + (err.message || "未知错误"));
        });
    },
    /** 查询国标28181设备列表 */
    getList() {
      this.loading = true;
      listWvpDevice(this.queryParams).then(response => {
        this.wvpDeviceList = response.rows;
        this.total = response.total;
        this.loading = false;
        // 清空选择状态
        this.clearSelection();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        deviceId: null,
        name: null,
        manufacturer: null,
        model: null,
        firmware: null,
        transport: null,
        streamMode: null,
        onLine: null,
        registerTime: null,
        keepaliveTime: null,
        ip: null,
        createTime: null,
        updateTime: null,
        port: null,
        expires: null,
        subscribeCycleForCatalog: null,
        subscribeCycleForMobilePosition: null,
        mobilePositionSubmissionInterval: null,
        subscribeCycleForAlarm: null,
        hostAddress: null,
        charset: null,
        ssrcCheck: null,
        geoCoordSys: null,
        mediaServerId: null,
        customName: null,
        sdpIp: null,
        localIp: null,
        password: null,
        asMessageChannel: null,
        heartBeatInterval: null,
        heartBeatCount: null,
        positionCapability: null,
        broadcastPushAfterAck: null,
        serverId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 卡片选择相关方法 */
    // 切换设备选择状态
    toggleDeviceSelection(device) {
      const index = this.selectedDevices.findIndex(d => d.id === device.id);
      if (index > -1) {
        this.selectedDevices.splice(index, 1);
      } else {
        this.selectedDevices.push(device);
      }
      this.updateSelectionState();
    },
    // 检查设备是否已选择
    isDeviceSelected(device) {
      return this.selectedDevices.some(d => d.id === device.id);
    },
    // 清空选择
    clearSelection() {
      this.selectedDevices = [];
      this.updateSelectionState();
    },
    // 更新选择状态
    updateSelectionState() {
      this.ids = this.selectedDevices.map(item => item.id);
      this.single = this.selectedDevices.length !== 1;
      this.multiple = this.selectedDevices.length === 0;
    },
    // 批量删除
    handleBatchDelete() {
      if (this.selectedDevices.length === 0) {
        this.$message.warning('请至少选择一个设备');
        return;
      }
      const deviceNames = this.selectedDevices.map(d => d.name || d.deviceId).join('、');
      this.$modal.confirm(`是否确认删除设备：${deviceNames}？`).then(() => {
        const ids = this.selectedDevices.map(d => d.id);
        return delWvpDevice(ids);
      }).then(() => {
        this.getList();
        this.clearSelection();
        this.$modal.msgSuccess("批量删除成功");
      }).catch(() => {});
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加国标28181设备";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getWvpDevice(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改国标28181设备";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateWvpDevice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWvpDevice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除国标28181设备编号为"' + ids + '"的数据项？').then(function() {
        return delWvpDevice(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/wvpDevice/export', {
        ...this.queryParams
      }, `wvpDevice_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
/* 卡片容器样式 */
.device-cards-container {
  margin-top: 20px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* 设备卡片样式 */
.device-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border-color: #c0c4cc;
}

.device-card.selected {
  border-color: #409eff;
  box-shadow: 0 6px 24px rgba(64, 158, 255, 0.25);
  background: #f0f9ff;
}

/* 卡片头部 */
.card-header {
  padding: 0;
}

.device-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-content {
  flex: 1;
  min-width: 0;
}

.device-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-id {
  font-size: 11px;
  color: #909399;
}

.status-tag {
  flex-shrink: 0;
}

/* 卡片内容 */
.card-content {
  padding: 0;
}

.info-section {
  margin-bottom: 12px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.info-section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #409eff;
  border-bottom: 1px solid #d0d7de;
  padding-bottom: 3px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
  min-height: 20px;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 8px;
  min-width: 60px;
}

.value {
  font-size: 12px;
  color: #303133;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 500;
}

/* 卡片操作按钮 */
.card-actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* 批量操作样式 */
.batch-actions {
  margin-bottom: 20px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .device-card {
    margin-bottom: 0;
  }
  
  .device-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .status-tag {
    align-self: flex-end;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
  }
  
  .value {
    text-align: left;
    width: 100%;
  }
  
  .card-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .device-cards-container {
    margin-top: 15px;
  }
  
  .cards-grid {
    gap: 10px;
  }
  
  .device-name {
    font-size: 14px;
  }
  
  .label, .value {
    font-size: 11px;
  }
  
  .section-title {
    font-size: 11px;
  }
}

/* Element UI 样式调整 */
.device-card .el-card__header {
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 6px 6px 0 0;
}

.device-card.selected .el-card__header {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-bottom: 1px solid #409eff;
}

.device-card .el-card__body {
  padding: 12px;
  background: #ffffff;
}

.device-card.selected .el-card__body {
  background: #fafcff;
}

.device-card .el-checkbox {
  margin-right: 0;
}

.device-card .el-tag {
  border: none;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
.device-card {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 确保卡片选择时有视觉反馈 */
.device-card.selected .device-name {
  color: #409eff;
  text-shadow: 0 1px 2px rgba(64, 158, 255, 0.1);
}

.device-card.selected .section-title {
  color: #1976d2;
}

.device-card.selected .info-section {
  background: #f0f9ff;
  border-color: #bbdefb;
}

/* 新增：卡片阴影加强（已合并到主样式中） */

/* 新增：卡片内容间距优化已在上方定义 */

/* 新增：状态标签样式增强 */
.status-tag {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
</style>
